<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="150px">
      <el-form-item label="运输起始地点">
        <el-input v-model="formInline.fromLocation" placeholder="运输起始地点"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getFetchData">查询</el-button>
        <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
        <el-button type="primary" @click="exLogistics('formInline')">导出</el-button>
      </el-form-item>
    </el-form>
    <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" class="el-icon-plus" @click="openAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button :disabled="updateFlag" type="success" class="el-icon-edit" @click="openEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button :disabled="deleteFlag" type="danger" class="el-icon-delete-solid" @click="openDeleteDialog">删除</el-button>
      </el-col>
    </el-row>
  </div>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="transportId"
          label="物流运输记录的唯一标识"
          width="150">
      </el-table-column>
      <el-table-column
          prop="productName"
          label="运输的产品(商品名称)"
          width="120">
      </el-table-column>
      <el-table-column
          prop="transportDate"
          label="运输开始日期和时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="expectedDeliveryDate"
          label="预计送达日期和时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="fromLocation"
          label="运输起始地点"
          width="120">
      </el-table-column>
      <el-table-column
          prop="toLocation"
          label="运输目的地点"
          width="120">
      </el-table-column>
      <el-table-column
          prop="transportMethod"
          label="运输方式"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carrierId"
          label="承运人或运输公司ID"
          width="120">
      </el-table-column>
      <el-table-column
          prop="trackingNumber"
          label="运输的产品数量"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
        <template v-slot="s">
          <el-tag v-if="s.row.status==1">未运输</el-tag>
          <el-tag v-if="s.row.status==2">运输中</el-tag>
          <el-tag v-if="s.row.status==3">运输完成</el-tag>
        </template>
      </el-table-column>

      <el-table-column
          prop="notes"
          label="运输过程中的特别说明或备注"
          width="120">
      </el-table-column>
      <el-table-column
          prop="qstatus"
          label="是否签收"
          width="120">
        <template v-slot="s">
          <el-tag v-if="s.row.qstatus==1">代签收</el-tag>
          <el-tag v-if="s.row.qstatus==2">已签收</el-tag>
          <el-tag v-if="s.row.qstatus==3">拒签</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="handleClickSend(scope.row)" type="text" size="small" v-if="scope.row.status==1">开始配送</el-button>
          <el-button @click="handleClickDetails(scope.row)" icon="el-icon-edit" type="text" size="small">物流追踪</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="onPageSizeChange"
        @current-change="onPageNumberChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-bottom: -100px">
    </el-pagination>

    <el-dialog title="货物运输详细信息" width="700px" append-to-body :visible.sync="transportDialogVisible">
        <el-form :model="formData">
          <el-row :span="12">
            <el-col :span="12">物流编号：{{formData.transportId}}</el-col>
            <el-col :span="12">送货员：{{formData.deliveryMan}}</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">农作物编号：{{ formData.productCode }}</el-col>
            <el-col :span="12">农作物名称：{{ formData.productName }}</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">原料厂名称：{{ formData.fromLocation }}</el-col>
            <el-col :span="12">货物数量：{{ formData.trackingNumber }}</el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">加工厂名称：{{ formData.toLocation }}</el-col>
            <el-col :span="12">
              <el-form-item label="储存仓库">
                <el-select v-model="formData.senderId" placeholder="请选择活动区域">
                  <el-option
                      v-for="item in warehouseList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    {{item.name}}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transportDialogVisible = false">取 消 配 送</el-button>
        <el-button type="primary" @click="startDelivery">开 始 配 送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SrcLogistics",
  data(){
    return{
      transportDialogVisible:false,
      formInline:{},
      tableData:"",
      total:0,
      pageSize:5,
      pageNum:1,
      formData:{},
      warehouseList:[]
    }
  },
  methods:{
    handleCurrentChange(newPage){
      this.pageNum=newPage;
      this.getFetchData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i = 0; i < val.length; i++) {
        this.ids[i]=val[i].roleId;
      }
      this.single=val.length!=1;
      this.multiple=!val.length;
    },
    /** 打开运输（物流配送）*/
    handleClickSend(row){
      this.warehouseList=[];
      this.formData=row;
      let warehouseName = row.toLocation;
      console.log(warehouseName)
      if(warehouseName=="原材料工厂"){
        this.axios.post("/service/SysFactory/cropList").then(res=>{
          this.warehouseList=res.data.data;
        })
        this.transportDialogVisible=true;
      }else if (warehouseName=="加工厂") {
        this.axios.get("/service/factoryWarehouse/factoryStashNameId").then(res=>{
          this.warehouseList=res.data;
        })
        this.transportDialogVisible=true;
      }
    },
    /** 开始运输*/
    startDelivery(){
      this.axios.get("/service/logistics/updateStatus?id="+this.formData.transportId+"&status="+2).then(res=>{
        if(res.data.code==200){
          this.$message.success("配送成功");
          this.transportDialogVisible=false;
          this.getFetchData();
        }else
          this.$message.error("配送失败");
      })
    },
    openDeleteDialog(){

    },
    /** 物流追踪*/
    handleClickDetails(){

    },
    /** 获取加工厂仓库*/
    openAdd(){

    },
    openEdit(){

    },
    /** size的分页展示*/
    onPageSizeChange(page){
      this.pageSize=page;
      this.getFetchData();
    },
    /** num的分页展示*/
    onPageNumberChange(page){
      this.pageNum=page;
      this.getFetchData();
    },
    exLogistics(){
      window.location.href="http://localhost:8100/service/logistics/exLogistics";
    },
    /** 物流运输*/
    getFetchData(){
      this.axios.post("/service/logistics/getLogisticsInfo?pageNum="+ this.pageNum+"&pageSize="+this.pageSize, this.formInline).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    resetForm(){
      window.location.reload();
    }
  },
  created() { //钩子函数
    this.getFetchData();
  }
}
</script>

<style scoped>

</style>